<template>
	<view class="container-root">
		<view class="login-title">
			<text>爱视TV数字电视</text>
		</view>

		<view class="login-input">
			<view class="login-user-pwd">
				<image class="login-image" src="../../static/images/login_phone.png" mode=""></image>
				<input type="number" :value="cardID" placeholder="请输入卡号" @input="onCardidInput" />
			</view>
			<view class="login-user-pwd">
				<image class="login-image" src="../../static/images/login_password.png" mode=""></image>
				<input type="password" :value="passWord" placeholder="请输入密码" @input="onPasswordInput" />
			</view>
		</view>

		<view class="login-forget">
			<text @tap='onForget'>忘记密码？</text>
			<text @tap="register">立即注册</text>
		</view>

		<view class="login-submit" hover-class='login-submit-hover' @tap="onCardLogin">
			<text>登录</text>
		</view>

		<view class="vxlogin" @tap="onNaviVxLogin">
			<image class="vximage" src="../../static/img/weixin.png" mode=""></image>
			<text>快捷登录</text>
		</view>

		<view class="login-other" hover-class="login-other-hover">
			<text class="textline" @tap="onOpenMenuOther">更多登录方式</text>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="bottom-root">
				<view class="bottom-up">
					<text class="bottom-line bottom-title">更多登录方式</text>
					<view class="bottom-mid">
						<!-- <text class="bottom-line" @tap="onNaviStbLogin">机顶盒号登录</text> -->
						<!-- <text class="bottom-line" @tap="onNaviUserLogin">用户账号登录</text> -->
						<text class="bottom-line" @click="onNaviQRLogin()">扫CA卡条形码登录</text>
					</view>
				</view>
				<view class="bottom-down" @tap="onCancelMoreOther">
					<text>取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import apis from '../../api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex' //导入vuex的mapState和mapMutations方法
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'


	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				cardID: '',
				cardIDtmp:'',
				passWord: '',
				passWordtmp: '',
				key: '765a3e6ae7eaa579ddfaef3524d447ed',
				addressName: '',
				country: '',
				weather: {
					hasData: false,
					data: []
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']), //对全局变量hasLogin进行监控
		},
		onLoad(options) {
			let that = this;
			
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					//console.log('当前位置的经度：' + res.longitude);
					//console.log('当前位置的纬度：' + res.latitude);
				}
			});			
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// 获取用户信息
					//console.log(loginRes)
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							// that.yonghuwx = infoRes.userInfo
							//console.log(infoRes)
						}
					});
				}
			});
			if(options.Type === '1'){
				that.cardID = JSON.parse(options.cardID);
				that.passWord = JSON.parse(options.passWord);
			}
			that.cardIDtmp = that.cardID;
			this.passWordtmp = that.passWord;
		},
		methods: {
			...mapMutations(['login','logout']), //对全局方法 login进行监控

			onCardidInput(e) {
				this.cardIDtmp = e.target.value;
			},
			onPasswordInput(e) {
				this.passWordtmp = e.target.value;
			},
			onForget() {
				uni.showToast({
					title: '请前往营业厅办理该业务！',
					icon: "none"
				})
			},
			toIndex(provider) {
				this.login(provider)
				uni.switchTab({
					url: '../index/index'
				})
			},
			onCardLogin() {
				this.cardID = this.cardIDtmp;
				this.passWord = this.passWordtmp;
				if (this.cardID.length > 0 && this.passWord.length > 0) {
					apis.login({
						"name": this.cardID,
						"password": this.passWord,
						"type": '1' // 0-微信登录 1-卡号登录
					}).then(res => {
						console.log(res);

						if (res[1].data.status == 200 && res[1].data.content) {
							this.toIndex(res[1].data)
						} else {
							uni.showToast({
								title: res[1].data.message,
								icon: "none"
							});
							this.logout()
						}
					})
				} else {
					uni.showToast({
						title: '卡号或密码格式不正确!请重新输入',
						icon: "none"
					})
				}
			},
			onNaviVxLogin() {
				uni.navigateTo({
					url: '../vxlogin/vxlogin'
				})
			},
			onOpenMenuOther() {
				this.$refs.popup.open();
			},
			onNaviStbLogin() {
				uni.navigateTo({
					url: "../stblogin/stblogin"
				})
			},
			onNaviUserLogin() {
				uni.navigateTo({
					url: '../userlogin/userlogin'
				})

			},
			onCancelMoreOther() {
				this.$refs.popup.close();
			},
			onNaviQRLogin: function() {
				let cardId
				var that = this
				uni.scanCode({
					success: function(res) {
						//console.log(res.result);
						cardId = res.result
						that.cardID = cardId
						that.onCancelMoreOther()
					},

				});
			},
			register(){
				uni.navigateTo({
					url:'../register/register'
				})
			}
		}
	}
</script>

<style scoped>
	.vxlogin {
		width: 100%;
		height: 48rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #A9A9A9;
	}

	.vximage {
		width: 58rpx;
		height: 48rpx;
	}

	.login-other {
		margin-top: 420rpx;
		color: #00B9EF;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 60rpx;
	}

	.login-other::after {
		border: none;
	}

	.login-other-hover {
		color: rgba(0, 185, 239, 0.7);
	}

	.textline {
		border-style: none none solid none;
		/* text-decoration: underline; */
	}

	.bottom-root {
		width: 100%;
		height: 340rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bottom-up {
		width: 90%;
		width: calc(100% - 40rpx);
		height: 170rpx;
		background-color: white;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bottom-up>text {
		width: 90%;
		width: calc(100% - 40rpx);
		height: 80rpx;
		background-color: white;
		text-align: center;
		line-height: 80rpx;
		border-bottom: 1rpx solid #999999;
		color: #a3a3a3;
		font-size: 26rpx;
	}

	.bottom-mid {
		width: 90%;
		width: calc(100% - 40rpx);
		height: 270rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bottom-mid text {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-bottom: 1rpx solid #999999;
		color: #555555;
	}

	.menu-hover {
		background-color: #e3e3e5;
	}

	.bottom-down {
		width: 90%;
		width: calc(100% - 40rpx);
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: white;
		border-radius: 10rpx;
		margin-top: 50rpx;
		color: #555555;
	}

	input {
		width: 420rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>
